<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '订单修改',
			size: '70%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交修改"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form
			v-if="is_cart == 1"
			ref="form"
			inline
			:model="editAppointForm"
			class="demo-form-inline"
			label-position="top"
		>
			<el-card shadow="never">
				<el-form-item label="客户类型">
					<cl-select v-model="editCartForm.cus_type" placeholder="请选择" filterable>
						<el-option label="新客" :value="1" />
						<el-option label="老客" :value="2" />
					</cl-select>
				</el-form-item>
				<el-form-item label="预约时间">
					<cl-date-picker
						v-model="editCartForm.appoint_time"
						type="datetime"
						placeholder="选择日期"
						value-format="yyyy-MM-dd HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item label="所属品牌">
					<cl-select
						v-model="editCartForm.bra_id"
						placeholder="请选择品牌"
						filterable
						style="width: 100%"
					>
						<el-option
							v-for="item in brandList"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="预约人部门">
					<cl-cascader
						v-model="editCartForm.add_dept_id"
						@change="changeAppointDept"
						:options="deptList"
					/>
				</el-form-item>
				<el-form-item label="预约人">
					<cl-select v-model="editCartForm.add_user_id" placeholder="请选择" filterable>
						<el-option
							v-for="(item, index) in appointUser"
							:key="index"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="排店人部门">
					<cl-cascader
						v-model="editCartForm.order_date_id_dept"
						@change="changePlanDept"
						:options="deptList"
					/>
				</el-form-item>
				<el-form-item label="排店人">
					<cl-select
						v-model="editCartForm.order_date_id_user"
						placeholder="请选择"
						filterable
					>
						<el-option
							v-for="(item, index) in planUser"
							:key="index"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</cl-select>
				</el-form-item>
			</el-card>

			<el-card shadow="never" class="mt-2">
				<el-form-item label="开单时间">
					<cl-date-picker
						v-model="editAppointForm.add_time"
						type="datetime"
						placeholder="选择日期"
						value-format="yyyy-MM-dd HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item label="总金额">
					<el-input v-model="editAppointForm.total_amount" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="应付金额">
					<el-input v-model="editAppointForm.pay_amount" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="实付金额">
					<el-input v-model="editAppointForm.real_amount" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="欠款金额">
					<el-input v-model="editAppointForm.rest_amount" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="卡耗金额">
					<el-input v-model="editAppointForm.card_consume" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="成本">
					<el-input v-model="editAppointForm.costmoney" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="实际业绩">
					<el-input v-model="editAppointForm.real_achieve" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="卡耗业绩">
					<el-input v-model="editAppointForm.real_consume" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="支付时间">
					<cl-date-picker
						v-model="editAppointForm.payment_time"
						type="datetime"
						placeholder="选择日期"
						value-format="yyyy-MM-dd HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item label="事业部">
					<cl-select
						v-model="editAppointForm.add_user_biz"
						disabled
						placeholder="请选择"
						filterable
						@change="changeAppointBizId"
					>
						<el-option
							v-for="item in business"
							:key="item.biz_id"
							:label="item.biz_name"
							:value="item.biz_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="收银门店" v-if="editAppointForm.add_dept_id">
					<cl-shop-select
						v-model="editAppointForm.add_dept_id[1]"
						placeholder="收银门店"
						filterable
						clearable
						style="width: 100%"
						@change="changeMoneyDept"
						:options="appointDeptList"
					/>
				</el-form-item>
				<el-form-item label="是否分期">
					<cl-select v-model="editAppointForm.is_rest" placeholder="请选择">
						<el-option label="否" :value="0" />
						<el-option label="是" :value="1" />
					</cl-select>
				</el-form-item>
				<el-form-item label="是否还清">
					<cl-select v-model="editAppointForm.finish_rest" placeholder="请选择">
						<el-option label="否" :value="0" />
						<el-option label="是" :value="1" />
					</cl-select>
				</el-form-item>
				<el-form-item
					label="还款时间"
					v-if="editAppointForm.finish_rest == 0 && editAppointForm.is_rest == 1"
				>
					<cl-date-picker
						v-model="editAppointForm.next_pay_time"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd"
					/>
				</el-form-item>
				<el-form-item label="到店类型">
					<cl-select v-model="editAppointForm.cus_type" placeholder="请选择">
						<el-option
							v-for="item in deptType"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</cl-select>
				</el-form-item>
				<el-form-item label="订单状态">
					<cl-select v-model="editAppointForm.status" placeholder="请选择">
						<el-option label="未付款" :value="0" />
						<el-option label="已付款" :value="1" />
						<el-option label="已取消" :value="2" />
						<el-option label="已退款" :value="3" />
						<el-option label="付款中" :value="5" />
					</cl-select>
				</el-form-item>
			</el-card>
		</el-form>
		<el-card shadow="never" class="mt-2">
			<!-- <p class="project_info_title">
            <span>消费项目信息</span>
            <span
              ><el-button
                size="medium"
                type="primary"
                style="margin:padding:0px 10px;background:rgb(255,82,104);border-color:rgb(255,82,104)"
                @click="addProject(1)"
                >新增服务</el-button
              ><el-button
                size="medium"
                type="primary"
                style="margin:padding:0px 10px;background:rgb(255,82,104);border-color:rgb(255,82,104)"
                @click="addProject(4)"
                >新增卡</el-button
              ></span
            >
          </p> -->
			<el-card
				shadow="never"
				v-for="(item, index) in editProjectList"
				:key="index"
				:class="{ 'mt-2': index != 0 }"
			>
				<!-- <div class="close_btn" @click="delProject(index)">
              <i class="el-icon-close"></i>
            </div> -->
				<!-- <span>{{ index + 1 }}.</span> -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="服务项目/卡:" v-if="item.prod_type == 1">
						<cl-select v-model="item.prod_id" placeholder="请选择" filterable disabled>
							<el-option-group
								v-for="group in serviceitemList"
								:key="group.cname"
								:label="group.cname"
							>
								<el-option-group
									v-for="item in group.childlist"
									:key="item.cname"
									:label="item.cname"
									class="s-pl-5"
								>
									<el-option
										v-for="itema in item.items"
										:key="itema.id"
										:label="itema.name"
										:value="itema.id"
									/>
								</el-option-group>
							</el-option-group>
						</cl-select>
					</el-form-item>
					<el-form-item label="服务项目/卡" v-if="item.prod_type == 4">
						<cl-select v-model="item.prod_id" placeholder="请选择">
							<el-option
								v-for="item in cartitemList"
								:key="item.sc_id"
								:label="item.sc_name"
								:value="item.sc_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="售价">
						<el-input v-model="item.money" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="数量">
						<el-input v-model="item.buy_num" placeholder="请输入内容" disabled />
					</el-form-item>
					<el-form-item label="服务老师">
						<cl-select
							v-model="item.teacher_id"
							placeholder="请选择"
							multiple
							filterable
						>
							<el-option
								v-for="item in teacherList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="销售老师">
						<cl-select
							v-model="item.sell_teacher_id"
							placeholder="请选择"
							multiple
							filterable
						>
							<el-option
								v-for="item in teacherList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</cl-select>
					</el-form-item>

					<el-form-item label="顾问老师">
						<cl-select
							v-model="item.adviser_teacher_id"
							placeholder="请选择"
							multiple
							filterable
						>
							<el-option
								v-for="item in teacherList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</cl-select>
					</el-form-item>

					<el-form-item label="总金额">
						<el-input v-model="item.money" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="应付金额">
						<el-input v-model="item.real_amount" placeholder="请输入内容" />
					</el-form-item>

					<el-form-item label="卡耗金额">
						<el-input v-model="item.card_consume" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="成本">
						<el-input v-model="item.costmoney" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="手工费">
						<el-input v-model="item.sgmoney" placeholder="请输入内容" />
					</el-form-item>

					<el-form-item label="选择卡" v-if="item.is_maintain == 1">
						<cl-select v-model="item.use_card" placeholder="请选择">
							<el-option
								v-for="item1 in cardList"
								:key="item1.card_id"
								:label="item1.card_name"
								:value="item1.card_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="使用卡" v-if="item.is_maintain == 1">
						<cl-select v-model="item.use_card" placeholder="请选择">
							<el-option
								v-for="item1 in cardList"
								:key="item1.card_id"
								:label="item1.card_name"
								:value="item1.card_id"
							/>
						</cl-select>
					</el-form-item>

					<el-form-item label="划卡次数" v-if="item.is_maintain == 1">
						<el-input v-model="item.nums" placeholder="请输入内容" />
					</el-form-item>
				</el-form>
			</el-card>
		</el-card>
		<el-card shadow="never" class="mt-2 pay_info">
			<div shadow="never" class="pay_flex">
				<div class="pay_flex_item">
					<div>付款日期</div>
				</div>
			</div>
			<div class="pay_way">
				<div
					class="pay_way_item"
					:class="{ 'mt-2': index != 0 }"
					v-for="(item, index) in editPayList"
					:key="index"
				>
					<!-- <div class="close_btn" @click="delMoney(index)">
                <i class="el-icon-close"></i>
              </div> -->
					<div class="pay_way_item_temp">
						<span>付款方式</span>
						<cl-select
							v-model="item.pay_id"
							placeholder="请选择"
							@change="changePayWay(item, index)"
						>
							<el-option
								v-for="(te, i) in payList"
								:key="i"
								:label="te.pay_name"
								:value="te.pay_id"
							/>
						</cl-select>
					</div>
					<div class="pay_way_item_temp" v-if="item.pay_id == 196">
						<span>付款类型</span>
						<cl-select
							v-model="item.dep_id"
							placeholder="请选择"
							@change="changeHowMoney(item)"
							clearable
						>
							<el-option
								v-for="item in depositList"
								:key="item.id"
								:label="item.dep_amount"
								:value="item.id"
								:disabled="item.is_change == 1"
							/>
						</cl-select>
					</div>
					<div class="pay_way_item_temp" v-else>
						<span>付款金额</span>
						<el-input v-model="item.pay_amount" placeholder="请输入内容" />
					</div>
					<div class="pay_way_item_temp">
						<span>支付状态</span>
						<cl-select v-model="item.status" placeholder="请选择">
							<el-option label="未支付" :value="0" />
							<el-option label="已支付" :value="1" />
						</cl-select>
					</div>
					<div class="pay_way_item_temp">
						<span>付款时间</span>
						<cl-date-picker
							v-model="item.pay_time"
							type="datetime"
							placeholder="选择日期"
							value-format="yyyy-MM-dd HH:mm:ss"
						/>
					</div>
				</div>
			</div>
		</el-card>
	</cl-drawer>
</template>
<script>
import threeLevel from "@/assets/countryLevel3";

export default {
	name: "OrderForm",
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			shopList: [], //门店
			appointDeptList: [], //预约人部门
			teacherList: [], //老师
			depositList: [], //定金列表,
			appointUser: [], //预约人
			planUser: [], //排店人
			//编辑订单
			editCartForm: {},
			editAppointForm: {},
			editProjectList: [],
			editPayList: [],
			addressLevel: threeLevel, //城市
			deptType: [
				{ label: "新客", value: 1 },
				{ label: "老客", value: 2 },
				{ label: "老转新", value: 3 }
			],
			serviceitemList: [], //服务列表,
			cartitemList: [], //卡列表
			complementaryColor: [
				{ label: "2个月", value: 2 },
				{ label: "3个月", value: 3 },
				{ label: "6个月", value: 6 },
				{ label: "12个月", value: 12 }
			],
			payList: [], //支付方式
			cascaderKey: 1,
			cardList: [], //卡列表
			is_cart: 1,
			saving: false,
			deptList: [],
			brandList: []
		};
	},
	created() {
		this.getPay();
	},
	methods: {
		open(data) {
			this.$refs.drawer.create();
			this.GET_SERVICEITEM_GETTYPESONS(data);
			this.GET_API_SERVICECARD_LISTS(data);
			this.getOrderInfo(data);
			this.changeBiz(data.biz_id);
			this.getDeptList(data.biz_id);
			this.getBrandList(data.biz_id);
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		close() {
			this.$refs.drawer.close();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;

				this.saving = true;
				let cart = {
					...this.editCartForm,
					add_dept_id: this.editCartForm.add_dept_id[2],
					order_date_id_dept: this.editCartForm.order_date_id_dept[2] || ""
				};
				let main = JSON.parse(JSON.stringify(this.editAppointForm));

				this.teacherList.forEach(e => {
					if (e.value == main.rec_user_id) {
						main.rec_user_name = e.label; //收银人名字
					}
				});

				this.shopList.forEach(e => {
					e.children.forEach(v => {
						if (v.dept_id == main.rec_dept_id) {
							main.rec_dept_name = v.dept_name; //收银人部门名称
						}
					});
				});

				main.add_dept_id = this.editAppointForm.add_dept_id[1];
				main.dept_id = this.editAppointForm.dept_id[1];
				main.rec_dept_id = this.editAppointForm.rec_dept_id[1];

				////////////////////////////////////////////////////////////////////////////////////
				// items

				let items = [];
				items = JSON.parse(JSON.stringify(this.editProjectList));

				this.serviceitemList.forEach(e => {
					// console.log(e);
					e.childlist.forEach(v => {
						v.items.forEach(item => {
							// console.log(item);
							items.forEach(res => {
								if (item.id == res.prod_id) {
									res.prod_name = item.name;
									res.prod_type = item.type;
								}
							});
						});
					});
				});

				items.forEach(e => {
					let arr_teacher_name = [];
					let arr_sell_teacher_name = [];
					let arr_adviser_teacher_name = [];

					// console.log(e);
					(e.teacher_id || []).forEach(item => {
						this.teacherList.forEach(v => {
							if (item == v.user_id) {
								arr_teacher_name.push(v.user_name);
							}
						});
					});
					(e.sell_teacher_id || []).forEach(item => {
						this.teacherList.forEach(v => {
							if (item == v.user_id) {
								arr_sell_teacher_name.push(v.user_name);
							}
						});
					});

					(e.adviser_teacher_id || []).forEach(item => {
						this.teacherList.forEach(v => {
							if (item == v.user_id) {
								arr_adviser_teacher_name.push(v.user_name);
							}
						});
					});
					e.teacher_name = arr_teacher_name;
					e.sell_teacher = arr_sell_teacher_name;
					e.adviser_teacher = arr_adviser_teacher_name;
				});
				items.forEach(e => {
					e.teacher_id = (e.teacher_id || []).join();
					e.sell_teacher_id = (e.sell_teacher_id || []).join();
					e.teacher_name = e.teacher_name.join();
					e.sell_teacher = e.sell_teacher.join();
					e.adviser_teacher_id = (e.adviser_teacher_id || []).join();
					e.adviser_teacher = e.adviser_teacher.join();
				});
				let form = {
					cart,
					main,
					items,
					pay_data: this.editPayList
				};
				await this.$service.order.update(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},

		// -------------------------------------------------
		// 根据事业部获取门店
		async changeBiz(biz_id) {
			const res = await this.$service.shop.list({ biz_id });
			res.forEach(item => {
				item.children.forEach(x => {
					if (x.children.length == 0) {
						delete x.children;
					}
				});
			});
			this.shopList = res;
		},
		//切换预约人事业部
		changeAppointBizId(e) {
			this.departmentList(e);
		},
		async getBrandList(biz_id) {
			this.brandList = await this.$store.dispatch("common/getBizBrands", {
				biz_id,
				needAll: false
			});
		},
		//切换收银人门店
		changeMoneyDept(e) {
			this.editProjectList.forEach(e => {
				e.teacher_id = "";
				e.sell_teacher_id = "";
				e.adviser_teacher_id = "";
			});
			this.GET_USER_LISTS(e);
		},
		//获取部门列表
		async departmentList(biz_id) {
			const res = await this.$service.shop.list({
				parent_id: 0,
				biz_id,
				is_store: 1,
				all: 1
			});
			this.appointDeptList = res.reduce((prev, curr) => [...prev, ...curr.children], []);
		},

		// 获取技师列表
		async GET_USER_LISTS(dept_id) {
			const { data } = await this.$service.user.list({
				// biz_id: this.orderInfo.biz_id,
				dept_id,
				is_teacher: 1
			});
			this.teacherList = (data ?? []).map(e => ({
				...e,
				label: e.user_name,
				value: e.user_id
			}));
		},
		// 获取服务列表
		async GET_SERVICEITEM_GETTYPESONS({ biz_id }) {
			let res = await this.$service.public.serviceGetTypeSons({
				type: 1,
				biz_id
			});
			res.forEach(item => {
				item.childlist.forEach(itema => {
					itema.items.forEach(itemb => {
						this.$set(itemb, "id", itemb.si_id);
						this.$set(itemb, "name", itemb.si_name);
					});
				});
			});
			this.serviceitemList = res;
		},
		//获取卡列表
		async GET_API_SERVICECARD_LISTS({ biz_id }) {
			const data = await this.$service.servicecard.lists({ biz_id });
			this.cartitemList = data;
		},
		//获取当前会员定金
		async getDeposit(cus_id) {
			const data = await this.$service.deposit.listuse({ cus_id });
			this.depositList = (data ?? []).map(e => ({ ...e, is_change: 0 }));
		},
		//获取支付方式列表
		async getPay() {
			const data = await this.$service.public.storePayment();
			this.payList = (data ?? []).map(e => ({ ...e, money: "" }));
		},
		//切换付款方式
		changePayWay(item) {
			this.depositList.forEach(e => {
				e.is_change = 0;
			});
			this.$set(item, "dep_id", "");
			this.editPayList.forEach(v => {
				if (!v.dep_id) return;
				this.depositList.forEach(s => {
					if (s.id == v.dep_id) {
						s.is_change = 1;
					}
				});
			});
		},
		//切换定金数
		changeHowMoney(item) {
			item.pay_amount = this.depositList.forEach(e => {
				e.is_change = 0;
			});
			this.editPayList.forEach(v => {
				if (!v.dep_id) return;
				this.depositList.forEach(s => {
					if (s.id == v.dep_id) {
						s.is_change = 1;
						v.pay_amount = s.dep_amount;
					}
				});
			});
		},
		async getDeptList(biz_id) {
			// let biz_id = this.getCurrBiz(true);
			const data = await this.$service.dept.list({
				parent_id: 0,
				biz_id,
				// is_store: 1
			});
			let deptList = data || [];
			let list = this.bizList.map(biz => {
				return {
					id: biz.biz_id,
					value: biz.biz_id,
					label: biz.biz_name,
					children: deptList
						.filter(item => biz.biz_id == item.biz_id)
						.map(item => {
							let newItem = {
								id: item.dept_id,
								value: item.dept_id,
								label: item.dept_name,
								children: []
							};
							if (item.children && item.children.length) {
								newItem.children = item.children
									.filter(subItem => subItem.parent_id == item.dept_id)
									.map(subItem => {
										return {
											id: subItem.dept_id,
											value: subItem.dept_id,
											label: subItem.dept_name
										};
									});
							}
							return newItem;
						})
				};
			});
			this.deptList = list;
		},
		async changeAppointDept(v, type) {
			if (!type) {
				this.editCartForm.add_user_id = "";
			}
			this.appointUser = [];
			this.appointUser = await this.getUserList({
				biz_id: v[0],
				dept_id: v[2]
			});
		},
		async changePlanDept(v, type) {
			if (!type) {
				this.editCartForm.order_date_id_user = "";
			}
			this.planUser = [];
			this.planUser = await this.getUserList({
				biz_id: v[0],
				dept_id: v[2]
			});
		},

		// 获取归属人列表
		async getUserList(params) {
			const { data } = await this.$service.user.list(params).catch(() => []);
			return data || [];
		},
		// 获取编辑中的详情数据
		async getOrderInfo(data = {}) {
			this.editAppointForm = {};
			const res = await this.$service.order.editInfo({
				main_id: data.main_id,
				cus_id: data.cus_id
			});
			this.editProjectList = res.items;
			this.$service.servicecard
				.cardlist({
					cus_id: data.cus_id,
					type: 1
				})
				.then(list => {
					// console.log("获取卡列表", res);
					this.cardList = list; //获取卡列表
				});
			let temp = res.main;
			this.editAppointForm = temp;
			this.editCartForm = { ...res.cart };
			this.changeAppointDept(this.editCartForm.add_dept_id, 1);
			this.changePlanDept(this.editCartForm.order_date_id_dept, 1);
			this.departmentList(temp.add_user_biz);
			this.GET_USER_LISTS(temp.add_dept_id[1] || "");
			this.getDeposit(temp.cus_id);
			this.editPayList = res.pay_data;
		},
		// 计算应付金额
		// getShouldPay() {
		// 	this.editAppointForm.pay_amount = 0
		// 	this.editProjectList.forEach((e) => {
		// 		this.editAppointForm.pay_amount += Number(e.money)
		// 	})
		// },
		//计算实付金额
		// getActual(item, index) {
		// 	this.editAppointForm.real_amount = 0
		// 	this.editProjectList.forEach((e) => {
		// 		this.editAppointForm.real_amount += Number(e.real_amount)
		// 	})
		// },
		// 删除某个服务
		delProject(index) {
			this.confirm("此操作将删除该项目, 是否继续?").then(() => {
				this.editProjectList.splice(index, 1);
			});
		},
		// 新增服务
		addProject(type) {
			let obj = {
				list_id: "",
				prod_id: "",
				prod_name: "",
				teacher_id: "",
				teacher_name: "",
				sell_teacher_id: "",
				sell_teacher: "",
				add_user_biz_id: this.editAppointForm.add_biz_id,
				add_data: this.editAppointForm.add_data,
				appointDeptList: this.appointDeptList,
				appointPeople: this.appointPeople,
				add_user_id: this.editAppointForm.add_user_id,
				add_user_name: "",
				month: "",
				unit_price: "",
				real_amount: "",
				costmoney: "",
				sgmoney: "",
				is_plus: 0,
				is_maintain: 0,
				use_card: "",
				nums: "",
				prod_type: type,
				plus_money: ""
			};
			this.editProjectList.push(obj);
		},
		//新增付款方式
		addPayMoney() {
			let obj = {
				pay_amount: "",
				pay_id: "",
				money: ""
			};
			this.editPayList.push(obj);
		},
		//删除付款方式
		delMoney(index) {
			this.confirm("此操作将删除该项目, 是否继续?").then(() => {
				this.editPayList.splice(index, 1);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.edit_box {
	height: 100%;
	box-sizing: border-box;
}
.editTitle {
	font-size: 16px;
	font-weight: 700;
	margin-left: 10px;
	margin-bottom: 20px;
}

::v-deep {
	.el-form-item {
		width: 20%;
		margin-right: 0;
		margin-bottom: 14px;

		&__label {
			padding: 0;
			line-height: 30px;
		}
		&__content {
			width: 90%;
		}
	}
	.cl-cascader--small,
	.cl-select--small {
		width: 100%;
	}
	.el-date-editor.el-input {
		width: 100%;
	}
	.el-input__inner {
		padding-right: 46px;
	}
}

.close_btn {
	font-size: 24px;
	border: 1px solid #ccc;
	color: #666;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border-radius: 50%;
	position: absolute;
	right: -10px;
	top: -10px;
	background: #fff;
}
.appoint_import_info,
.project_info,
.pay_info {
	.project_info_item {
		background: rgb(249, 250, 252);
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 15px;
		position: relative;
	}
	.pay_flex {
		display: flex;
		.pay_flex_item {
			width: 20%;
			box-sizing: border-box;
			padding-right: 22px;
			.pay_item {
				margin-bottom: 10px;
			}
		}
	}
	.pay_way {
		margin-top: 15px;
		p {
			margin-bottom: 15px;
		}
		.pay_way_item {
			display: flex;
			padding: 20px;
			border-radius: 4px;
			border: 1px solid #ebeef5;
			position: relative;
			.pay_way_item_temp {
				display: flex;
				flex-direction: column;
				width: 20%;
				padding-right: 22px;
				box-sizing: border-box;
			}
			::v-deep .el-input {
				margin-top: 10px;
			}
		}
	}
	.appoint_import_info_title,
	.project_info_title,
	.pay_info_title {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		// background: rgb(249, 250, 252);
	}
}
</style>
